<template>
  <div class="rightbody">
    <!-- <div class="temptype clearfix">
      <ul>
        <li v-for="(item,index) in categorylist" :class="{'active':currentCategory == index}"
            @click="categoryClick(index)">
          <a>{{item.name}}</a>
        </li>
      </ul>
    </div> -->
    <div class="tempwrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
         style="position: fixed;top: 54px;left: 65px;bottom: 20px;width: 330px;overflow-y: auto;">
      <ul>
        <li v-for="(item,index) in datalist">
          <img :src="item.thumb" @click="addTemplate(index)">
        </li>
      </ul>
    </div>
    <Modal
      v-model="showTip"
      title="提示"
      @on-ok="sureClick"
      width="300">
      <p>页面模板会覆盖编辑区域已有组件，是否继续？</p>
    </Modal>

  </div>
</template>


<script>
  import api from '../api/index.js'

  export default {
    name: "templatefunc",
    data(){
      return {
        categorylist: [],
        currentCategory: -1,
        showTip: false,
        datalist: [],
        selectIndex: -1,
        page: 1, //当前页
        num: 20, // 一页显示多少条
        busy: false
      }
    },
    created(){
      this.initCategoryData()
      // this.loadData();
    },
    methods: {
      initCategoryData() {
        this.$http.get(api.getCategorylist(1)).then(res => {
//          console.log(res.data.lists)

          this.categorylist = res.data.lists;
          // debugger
          this.categoryClick(0);
        }).catch(error => { // 错误处理
          console.log(error)
          this.$Message.error('网络开小差啦~');
        })
      },
      categoryClick(index) {
        if (this.currentCategory == index) {
          return;
        }
        this.busy = false;
        this.currentCategoryList = [];
        this.datalist = [];
//        if (index != 0) {
          this.page = 1;
//        }
        this.currentCategory = index;
        this.loadData(index, 1, 25);
      },
      sureClick(){
        var templateObj = this.datalist[this.selectIndex];

        var params = {};
        params.value = templateObj;
        this.$store.dispatch('replaceTemplate', params);

      },
      addTemplate(index){

        var templateObj = this.datalist[index];
        this.selectIndex = index;

        this.showTip = true;

      },
      loadMore() {
        //console.log("wwwwwwww")
//        this.busy = true;
        var newPage = this.page;
//         console.log(newPage + "----" + newPage)
        this.loadData(this.currentCategory, newPage, this.num);
      },
      loadData(index, page, pageSize){
        var cObj = this.categorylist[index];
        //debugger
        if (cObj === undefined) {
          return;
        }
        // this.busy = true
        var biztype = cObj['id'];
        //2 图片 1 背景 3音乐 4 svg
        this.$http.get(api.getTemplate(biztype, page, pageSize)).then(res => {
          if (res.data.code == 200) {
            if (res.data.status) {
              if (this.datalist.length == 0) {
                this.datalist = res.data.lists;
                this.page++;
              } else {
                if (res.data.lists.length == 0) {
                  this.busy = false;
                } else {
                  for (var i = 0; i < res.data.lists.length; i++) {
                    var bean = res.data.lists[i];
                    this.datalist.push(bean);
                  }
                  this.page++
                }
              }
            } else {
              this.$Message.error(res.data.msg);
            }
          } else {
            this.$Message.error('网络开小差啦~');
          }
        }).catch(error => {
          // console.log(error)
          this.$Message.error('网络开小差啦~');
        })
      }
    }
  }
</script>


<style type="text/javascript">
  .temptype {
    position: fixed;
    top: 60px;
    width: 330px;
    height: 70px;
    left: 65px;
    overflow-y: auto;
  }

  .temptype ul {
    overflow: hidden
  }

  .temptype li {
    float: left;
  }

  .temptype li a {
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    padding: 0 10px;
    margin: 5px;
    color: #808386;
  }

  .temptype li.active a {
    background: #1abd9b;
    color: #fff;
    border-radius: 12px;
  }

  .tempwrap li {
    position: relative;
    float: left;
    width: 140px;
    height: 249px;
    margin: 10px;
    overflow: hidden;
  }

  .tempwrap img {
    width: 140px;
    height: 249px;
  }
</style>
